<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>06_列表渲染</title>
</head>

<body>
    <div id="demo">
        <h1>v-for遍历数组</h1>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{index}} -- {{p.name}} -- {{p.age}} ----
                <button @click="deleteP(index)">删除</button> ----
                <button @click="updateP(index,{name:'child',age:22})">更新</button>
            </li>
        </ul>


        <h1>v-for遍历对象</h1>
        <ul>
            <li v-for="(propertyValue,propertyName) in persons[1]" :key="propertyName">
                {{propertyValue}} --- {{propertyName}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../vue.js"></script>
<script>
    /**
     * vue 重写了改变数组内部元素的一部分方法(1.使用原生方法,2.更新界面)
     * splice 能实现增删改三个操作
     */
    const vm = new Vue({
        el: '#demo',
        data: {
            persons: [ //vue本身只是监视了persons的改变,没有监视数组内部的改变
                {
                    name: 'tom',
                    age: 18
                }, {
                    name: 'kehan',
                    age: 19
                }, {
                    name: 'faker',
                    age: 20
                }, {
                    name: 'teddy',
                    age: 21
                },
            ]
        },
        methods: {
            deleteP(index) {
                //1.使用原生splice方法  2.更新界面
                this.persons.splice(index, 1)
            },
            updateP(index, newP) {
                //this.persons[index] = newP  只是改变了persons内部里的一个值,但是并没有改变persons对象,并没有调用变异方法,不会更新界面
                this.persons.splice(index, 1, newP);
            }
        }
    });
</script>

</html>